<template>
    <div>
      <div class="info-content" >
        <table class="content-table" border id="detail-table">
                    <tr>
                        <td colspan="3">PRODUCTION ESTIMATE</td>
                        <td colspan="7">{{ detail.custom_company }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">Client  客户：</td>
                        <td>{{ detail.custom_name }}</td>
                        <td colspan="4">片名：</td>
                        <td colspan="2">{{detail.title}}</td>
                    </tr>
                    <tr>
                        <td colspan="2">Creative Director 创意总监：</td>
                        <td>{{ detail.creative_director }}</td>
                        <td colspan="4">Language  语言:</td>
                        <td colspan="2">{{ detail.language }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">Director  导演：</td>
                        <td>{{detail.director}}</td>
                        <td colspan="4">Prep Days  前期:</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td colspan="2">DOP  摄影：</td>
                        <td></td>
                        <td colspan="4">Post Days  后期:</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td colspan="2">Production Company 制作公司：</td>
                        <td></td>
                        <td colspan="4">Studio Shooting Day  棚内天数:</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td colspan="2">Executive Producer  监制：</td>
                        <td></td>
                        <td colspan="4">Length  长度:</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td colspan="2">Producer  制片：</td>
                        <td></td>
                        <td colspan="4">Date  制表日期 :</td>
                        <td colspan="2">{{ detail.date }}</td>
                    </tr>
                    <tr>
                        <td colspan="9"> &nbsp;&nbsp; </td>
                    </tr>
                    <tr class="bold">
                        <td colspan="7" width="80">Estimated Production Cost  制作成本</td>
                        <td>预算栏</td>
                        <td>核算栏</td>
                        <td></td>
                    </tr>
                    <tr :key="index" v-for="item, index in statics">
                        <td width="80">{{ letters[index] }}</td>
                        <td colspan="6" align="left">{{ item.title }}</td>
                        <td>{{item.budget}}</td>
                        <td>{{item.calculate}}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="10">&nbsp;&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="7">Total 总签价</td>
                        <td :key="index" v-for="item, index in 3"></td>
                    </tr>
                    <tr>
                        <td colspan="2">Sub Total</td>
                        <td colspan="5">总价无税金</td>
                        <td>￥{{projectTotal.total.budget}}</td>
                        <td>￥{{projectTotal.total.calculate}}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="2">税金Tax (总签价*)</td>
                        <td colspan="5">{{detail.tax * 100}}%增值税抵扣发票</td>
                        <td>￥{{projectTotal.total.budget_rate}}</td>
                        <td>￥{{projectTotal.total.calculate_rate}}</td>
                        <td></td>
                    </tr>							
                    <tr bgcolor="#eee">
                        <td colspan="2">TOTAL (RMB)</td>
                        <td colspan="5">总支出（人民币含税）</td>
                        <td>￥{{projectTotal.total.budget_total}}</td>
                        <td>￥{{projectTotal.total.calculate_total}}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td :key="index" v-for="item, index in 10">&nbsp;</td>
                    </tr>
                    <template :key="index" v-for="(item, index) in tableData">
                        <tr class="bold">
                            <td colspan="2">{{letters[index]}}.</td>
                            <td align="left">{{item.title}}</td>
                            <td>UNIT</td>
                            <td>QTY</td>
                            <td>TERMS</td>
                            <td>RATE</td>
                            <td>预算栏</td>
                            <td>核算栏</td>
                            <td>备注</td>
                        </tr>
                        <tr :key="ii" v-for="(val, ii) in item.children">
                            <td>{{ ii+1 }}</td>
                            <td>
                                <template v-if="val.id > 10000">
                                    <el-input @blur="inputBlur" @input="inputInput" size="small" id="table-input" v-model="val.title"  v-if="tableEditKey == `${ii}-${index}-title`"></el-input>
                                    <div class="table-input-item" @click="onCellClick(val,'title', ii, index)" v-else>
                                        <el-text>{{val.title}}</el-text>
                                    </div>
                                </template>
                                <span v-else>
                                    {{val.title}}
                                </span>
                            </td>
                            <td></td>
                            <td>{{ val.unit }}</td>
                            <td>{{ val.qty }}</td>
                            <td>{{ val.trems }}</td>
                            <td>{{ val.rate }}</td>
                            <td>{{ val.budget }}</td>
                            <td>{{ val.calculate }}</td>
                            <td>
                                <el-input @blur="inputBlur" @input="inputInput" size="small" id="table-input" v-model="val.remark"  v-if="tableEditKey == `${ii}-${index}-remark`"></el-input>
                                <div class="table-input-item" @click="onCellClick(val,'remark', ii, index)" v-else>
                                    <el-text>{{val.remark}}</el-text>
                                </div>
                            </td>
                        </tr>
                        <tr bgcolor="#eee">
                            <td>Sub Total</td>
                            <td></td>
                            <td>共计</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{{ statics[index] ? statics[index]['budget'] : '' }}</td>
                            <td>{{ statics[index] ? statics[index]['calculate'] : '' }}</td>
                            <td></td>
                        </tr>
                        <tr v-if="index < tableData.length - 1">
                            <td colspan="10">&nbsp;</td>
                        </tr>
                    </template>
                </table>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  interface tableData {
    id: number
    title: string
    pid: number
    unit: number
    qty: number
    trems: string
    rate: number
    budget: number
    calculate: number
    children?: tableData[]
}
  import { defineProps, ref, onMounted, watch, reactive } from 'vue'
  import { useSiteConfig } from '/@/stores/siteConfig'
  import { projectDetail } from '/@/api/backend/index'
  import { getProjectFeeitem, getProjectFeeitemStatics, exportProject, updateProjectFeeitemRemark } from '/@/api/backend/index'

  const props = defineProps({
      content: Object
  })
  const siteConfig = useSiteConfig()
  const detail = ref({})
  let tableData: any = ref([])
  const letters = [ 'A','B','C','D','E','F','G','H','I','J','K','L','M','N', 'O', 'P','Q', 'R','S','T' ]
let tabModel = ref('')
let tableEditKey = ref('')
let statics = ref([])
let projectTotal = reactive({advance:0, payment:0, reimbursement:0,total: {budget: 0, calculate: 0,rate:0.06, budget_rate: 0, calculate_rate: 0, budget_total: 0, calculate_total: 0,paid:0, no_paid: 0}})
let requestTimes = 0
let formData:FormData[] = []

  watch(() => props.content, function() {
      getProjectDetail()
  })
  onMounted(() => {
      getProjectDetail()
  })
  
  const getProjectDetail = () => {
    tableData.value = []
    statics = ref([])
    requestTimes = 0
    projectTotal = reactive({advance:0, payment:0, reimbursement:0,total: {budget: 0, calculate: 0,rate:0.06, budget_rate: 0, calculate_rate: 0, budget_total: 0, calculate_total: 0,paid:0, no_paid: 0}})
    projectDetail({project_id: props.content.project_id}).then((res) => {
        const data = res.data.list[0]
        detail.value = data
        projectTotal.total.rate = Number(detail.value.tax)
    })

    getProjectFeeitem({project_id: props.content.project_id}).then((res: any) => {
        const { list } = res.data
        list.forEach((item: any) => {
            let ele = {
                dbId: item.id,
                id: item.feeitem_id,
                title: item.feeitem_name,
                pTitle: item.feeitem_pname,
                remark: item.remark,
                pid: item.feeitem_pid,
                unit: item.unit,
                qty: item.qty,
                trems: item.trems,
                rate: item.rate,
                budget: item.budget,
                calculate: item.calculate,
                paid: item.paid > 0 ? item.paid : '',
                no_paid: item.calculate > 0 ? (item.calculate - (item.paid ? item.paid : 0)) : ''
            }
            setTableDataItem(ele)
        })
        tableData.value.sort((a: any, b: any) => {
            return b.id - a.id
        })
        tabModel.value = `table${tableData.value[0]['id']}`
    })

    getProjectFeeitemStatics({project_id: props.content.project_id}).then((res: any) => {
        let total = { id:999, title: '总计', budget: 0, calculate: 0,paid: 0,no_paid:0, subTotal: 0, subRate : '' }
        let { advance, payment, reimbursement } = res.data
        res.data.statics.sort((a: any, b: any) => {
            return b.id - a.id
        })
        res.data.statics.map((item: any) => {
            total.budget += Number(item.budget)
            total.calculate += Number(item.calculate)
            projectTotal.total.budget += Number(item.budget)
            projectTotal.total.calculate += Number(item.calculate)
            total.paid += isNaN(Number(item.paid)) ? 0 : Number(item.paid)
            total.no_paid = total.calculate - total.paid
            let subTotal = Number(item.budget - item.calculate)
            let subRate = item.budget == 0 ? subTotal : (Number((subTotal/item.budget).toFixed(2)) * 100) + '%'
            statics.value.push({...item, subTotal, subRate})
        })
        total.subTotal = Number(total.budget - total.calculate)
        total.subRate = total.budget == 0 ? total.subTotal : (Number((total.subTotal/total.budget).toFixed(2)) * 100) + '%'
        projectTotal.advance = advance
        projectTotal.payment = payment
        projectTotal.reimbursement = reimbursement
        projectTotal.total.budget_rate = (projectTotal.total.budget * projectTotal.total.rate).toFixed(2);
        projectTotal.total.calculate_rate = (projectTotal.total.calculate * projectTotal.total.rate).toFixed(2);
        projectTotal.total.budget_total = projectTotal.total.budget + Number(projectTotal.total.budget_rate)
        projectTotal.total.calculate_total = projectTotal.total.calculate + Number(projectTotal.total.calculate_rate)
        projectTotal.total.paid = total.paid
        projectTotal.total.no_paid = total.no_paid
        // statics.value.splice(0,0, total)
    })
  }
const setTableDataItem = (ele: any) => {
    const pIndex = tableData.value.findIndex((p: any) => p.id == ele.pid)
    if(pIndex == -1){
        tableData.value.push({
            id: ele.pid,
            title: ele.pTitle,
            pid: 0,
            budget: 0,
            calculate: 0,
            children: [
                {
                    dbId: ele.dbId,
                    id: ele.id,
                    title: ele.title,
                    pid: ele.pid,
                    remark: ele.remark,
                    unit: ele.unit ? ele.unit : 0,
                    qty: ele.qty ? ele.qty : 0,
                    trems: ele.trems ? ele.trems : '',
                    rate: ele.rate ? ele.rate : 0,
                    budget: ele.budget ? ele.budget : 0,
                    calculate: ele.calculate ? ele.calculate : 0,
                    paid: ele.paid ?? "",
                    no_paid: ele.calculate > 0 ? (ele.calculate - (ele.paid ? ele.paid : 0)) : ''
                }
            ]
        })
    } else {
        const cIndex = tableData.value[pIndex]['children']?.findIndex((p: any) => p.id == ele.id)
        if(cIndex == -1){
            tableData.value[pIndex]['children']?.push({
                dbId: ele.dbId,
                id: ele.id,
                title: ele.title,
                remark: ele.remark,
                pid: ele.pid,
                unit: ele.unit ? ele.unit : 0,
                qty: ele.qty ? ele.qty : 0,
                trems: ele.trems ? ele.trems : '',
                rate: ele.rate ? ele.rate : 0,
                budget: ele.budget ? ele.budget : 0,
                calculate: ele.calculate ? ele.calculate : 0,
                paid: ele.paid ?? "",
                no_paid: ele.calculate > 0 ? (ele.calculate - (ele.paid ? ele.paid : 0)) : ''
            })
            tableData.value[pIndex]['children'].sort((a:any, b:any) => {
                return b.id - a.id
            })
        }
    }
}
  </script>
  
  <style scoped lang="scss">
  .info-content-item {
      display: flex; justify-content: space-between; padding: 5px 10px; align-items: center;
      .label { display: inline-block; white-space: nowrap; padding-right: 13px;}
      .value {
          .ml-2 { 
              margin-bottom: 10px;
              margin-right: 10px
          }
      }
      div.value {
          
      }
  }
  
  ::deep th,td { font-size: 12px; }
  :deep(.el-table .cell) { font-size: 12px; padding:5px; min-width: unset; }
  :deep(.el-table td.el-table__cell){ font-size: 12px; padding:0; }
  
  .feeitem_detail {
    display: flex;flex-direction: row;
    white-space: nowrap;
      align-items: end;
    span { flex: 1; }
  }

  .content-table { width: 100%; border-collapse:collapse}
    .content-table td { height: 35px; line-height: 35px; padding: 0 10px; text-align: center; border-color: #ddd;}
    .content-table td[align="left"] { text-align: left; }
    .content-table .bold { font-weight: bold; }
  </style>